/*
 * @Description: 广告列表
 * @Author: kanglin
 * @Date: 2018-06-19 17:53:26
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.advert-index{
		.meida{
			position:relative;
			margin: 10px auto;
			& > video {
				width: 100%;
			}
			& > img {
				width: 100%;
			}
		}
	}
</style>

<template>

	<div class="advert-index">
		<Table
			:loading="loading"
			:data="adverts"
			:columns="columns"
			:height="tableHeight()"
			class="personal-scrollbar"/>
	</div>

</template>


<script>
import { Button, Tag } from 'iview';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'AdvertIndex',
	mixins: [computedTableHeight],
	props: {
		adverts: {
			type: Array,
			required: true,
		},
		edit: {
			type: Function,
			required: true,
		},
		// delete: {
		// 	type: Function,
		// 	required: true,
		// },
		loading: {
			type: Boolean,
			required: true,
		},
	},
	data() {
		return {
			columns: [

				{
					title: this.$t('advert.name'),
					align: 'center',
					render: (h, { row }) => {
						const name = row.customer && row.name ? row.name : this.$t('common.none');
						return (<div>{row.name}</div>);
					},
				},
				{
					title: this.$t('advert.media_type'),
					key: 'advert_type_id',
					align: 'center',
					render: (h, { row }) => (
						<div>{row.advert_type_id === 1 || row.advert_type_id === 3 ? this.$t('advert.image') : this.$t('advert.video')}</div>
					),
				},

				{
					title: this.$t('advert.content_key'),
					width: 240,
					key: 'content_key',
					align: 'center',
					render: (h, { row }) => {
						let content = <div>{this.$t('common.none')}</div>;

						if (row.advert_type_id == 2) {
							content = <video controls="controls" src={row.advert_descriptions[0].content} preload="none" />;
						} else {
							content = <img src={row.advert_descriptions[0].content} />;
						}
						return (<div class="meida">{content}</div>);
						// row.advert_type_id == 2
						// 	? <video class="meida" controls="controls" src={ row.advert_descriptions[0].content} preload="none"></video>
						// 	: <img src={ row.advert_descriptions[0].content} alt={this.$t('common.none')} width="50%"/>
					},

				},
				{
					title: `${this.$t('advert.play_second')}`,
					key: 'play_second',
					align: 'center',
				},
				{
					title: this.$t('banner.priority'),
					key: 'sort_order',
					align: 'center',
					width: 90,
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.sort_order) || '-' } </div>,
				},
				{
					title: this.$t('announcement.started_at'),
					width: 120,
					key: 'started_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.started_at) {
							const [day, time] = row.started_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},

				{
					title: this.$t('announcement.ended_at'),
					width: 120,
					key: 'ended_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.ended_at) {
							const [day, time] = row.ended_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('advert.operation'),
					align: 'center',
					render: (h, { row }) => (
						<div>
							<Button name="index__edit" size="small" onClick={() => { this.edit(row); }} type="primary">{this.$t('common.edit')}</Button>
							<Button name="index__delete" size="small" style="margin-left: 8px" onClick={() => { this.$emit('delete', row.id); }} type="error">{this.$t('common.delete')}</Button>
						</div>
					),
				},
			],
		};
	},
	methods: {
		/**
		 *  确认删除
		 * 	@param {Number} id {广告ID}
		 * 	@return {undefined}
		 */
		// confirmDelete(id) {
		// 	this.$Modal.confirm({
		// 		title: this.$t('advert.is_delete'),
		// 		okText: this.$t('common.confirm'),
		// 		cancelText: this.$t('common.cancel'),
		// 		onOk: () => {
		// 			this.delete(id);
		// 		},
		// 	});
		// },
		sortable(param) {
			const search_param = {
				sort_column: param.key,

				sort_by: param.order === 'normal' ? '' : param.order,
			};

			this.$emit('sort', search_param);
		},


	},
};
</script>
